<script setup>
import {
  VideoCamera,
  VideoPlay,
  Reading,
  Search as SearchIcon,
  Location,
  ShoppingCart,
  Search,
  Plus,
} from "@element-plus/icons-vue";
import BottomNavigation from "@/components/ChatComponents/BottomNavigation.vue";
</script>
<template>
  <div class="discover-page">
    <el-header class="page-header">
      <h1>发现</h1>
      <div class="header-actions">
        <el-icon :size="20"><Search /></el-icon>
        <el-icon :size="20" style="margin-left: 16px;"><Plus /></el-icon>
      </div>
    </el-header>
    <el-main>
      <el-menu
          default-active="1"
          class="menu-list"
      >
        <router-link :to="{name:'MomentsPage'}">
        <el-menu-item index="1">
          <el-icon><ChromeFilled /></el-icon>
          <span>朋友圈</span>
        </el-menu-item>
        </router-link>
        <router-link :to="{name:'videoview'}">
        <el-menu-item index="2">
          <el-icon><VideoCamera /></el-icon>
          <span>视频号</span>
        </el-menu-item>
        </router-link>
        <el-menu-item index="3">
          <el-icon><VideoPlay /></el-icon>
          <span>直播</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon><FullScreen /></el-icon>
          <span>扫一扫</span>
        </el-menu-item>
        <el-menu-item index="5">
          <el-icon><Service /></el-icon>
          <span>听一听</span>
        </el-menu-item>
        <el-menu-item index="6">
          <el-icon><Reading /></el-icon>
          <span>看一看</span>
        </el-menu-item>
        <el-menu-item index="7">
          <el-icon><Search /></el-icon>
          <span>搜一搜</span>
        </el-menu-item>
        <el-menu-item index="8">
          <el-icon><Location /></el-icon>
          <span>附近</span>
        </el-menu-item>
        <el-menu-item index="9">
          <el-icon><ShoppingCart /></el-icon>
          <span>购物</span>
        </el-menu-item>
        <el-menu-item index="10">
          <el-icon><Eleme /></el-icon>
          <span>游戏</span>
        </el-menu-item>
        <el-menu-item index="11">
          <el-icon><Help /></el-icon>
          <span>小程序</span>
        </el-menu-item>
      </el-menu>
    </el-main>
  </div>
  <BottomNavigation />
</template>

<style scoped>
.discover-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid #eee;
}

.header-actions {
  display: flex;
  align-items: center;
}

.menu-list {
  border: none;
}

.el-menu-item {
  display: flex;
  align-items: center;
}

.el-menu-item .el-icon {
  margin-right: 10px;
}
</style>